<template>
  <ContentWrap class="!mb-10px">
    <!--  方便扩展每个订单配置的属性不一样  -->
    <slot name="header">
      <div class="flex justify-between">
        <div class="custom-text-16 font-600">
          还款记录<el-divider direction="vertical" />HK20240506
        </div>
        <div class="custom-text-16 font-600"> 还款时间: </div>
      </div>
    </slot>
    <el-row class="mt-15px">
      <el-col :span="24">
        <el-table :data="goodsList" :table-layout="'fixed'" style="width: 100%" border>
          <el-table-column type="expand">
            <template #default>
              <div>
                <p class="ml-50px">
                  <span> 还款人员: ID：20156 王名:50%；ID：2563 张晓明30%；ID：4526 刘欢20% </span>
                </p>
                <p class="ml-50px mt-10px">
                  <span> 支付明细：现金支付【微信：支付200元；支付宝支付300元】 </span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品信息" prop="spuName" min-width="300">
            <template #default="{ row }">
              <div class="flex">
                <div class="flex items-center">
                  <div class="mr-[10px] flex items-center">
                    <el-image
                      :src="row.picUrl"
                      class="!h-[48px] !w-[48px] border-rd-4px"
                      @click="imagePreview(row.picUrl)"
                    >
                      <template #error>
                        <div class="image-slot">
                          <icon icon="ep:picture" />
                        </div>
                      </template>
                    </el-image>
                  </div>

                  <ElTooltip :content="row.spuName" placement="top">
                    <span class="overflow-ellipsis overflow-hidden">
                      {{ row.spuName }}
                      <el-tag v-for="property in row.properties" :key="property.propertyId">
                        {{ property.propertyName }}: {{ property.valueName }}
                      </el-tag>
                    </span>
                  </ElTooltip>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" prop="count" />

          <el-table-column align="center" label="零售单价" prop="price">
            <template #default="{ row }"
              ><div> {{ fenToYuan(row.price) }}元 </div> <div> 会员单价 </div></template
            >
          </el-table-column>
          <el-table-column align="center" label="实售单价" prop="price">
            <template #default="{ row }">{{ fenToYuan(row.price) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="订单实售" prop="payPrice">
            <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="实付金额" prop="payPrice">
            <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="资产抵扣" prop="payPrice">
            <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="欠款金额" prop="payPrice">
            <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="本次还款" prop="payPrice">
            <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="剩余欠款" prop="payPrice">
            <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="小计" prop="payPrice">
            <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="售后状态" prop="afterSaleStatus">
            <template #default="{ row }">
              <dict-tag
                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
                :value="row.afterSaleStatus"
              />
            </template>
          </el-table-column>
          <!--  方便扩展每个订单配置的属性不一样  -->
          <slot name="extension"></slot>
        </el-table>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { fenToYuan } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'
import { createImageViewer } from '@/components/ImageViewer'

defineOptions({ name: 'OrderRefundGoodsInfo' })

defineProps({
  goodsList: propTypes.array.def([])
})
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}
</script>
